<template>
	<view class="page-wallet">
		<view class="h5">将备份后的助记词妥善保管，做好防盗防丢措施</view>
		<view class="phrase-box bg-box">
			<block v-for="(val,index) in wallet.mnemonic_arr" :key="index">
				<view class="phrase-item">
					<view class="sort">{{index + 1}}.</view>
					<view class="word text-highlight">{{val}}</view>
				</view>
			</block>
		</view>
		<view class="remark">
			<view class="text title text-dark">温馨提示</view>
			<view class="text text-dark">1.请尽可能采用物理介质备份，例如用笔抄写在纸上等，尽可能不要采用截屏或者拍照之后放在互联网的设备里，以防止被黑客窃取。</view>
			<view class="text text-dark">2.用户需多次验证备份的助记词是否正确，一旦抄错，将无法找回。</view>
			<view class="text text-dark">3.将备份后的助记词妥善保管，做好防盗防丢措施。</view>
		</view>
		<view class="button-box-padding">
			<button class="btn-block btn-primary" @click="verify">确认</button>
		</view>
	</view>
</template>

<script>
	import api from "@/utils/api/wallet/index.js"
	export default {
		data() {
			return {
				wallet: {},
			}
		},
		onShow() {
			this.loadMnemonic()
		},
		methods: {
			async loadMnemonic() {
				let res = await api.preVerifyMnemonic()
				if (res.status == 1) {
					this.wallet = res.data;
				}
			},
			async verify() {
				uni.navigateTo({
					url: "verify-recovery-phrase?wallet=" + JSON.stringify(this.wallet)
				})
			}
		}
	}
</script>

<style lang="scss">
	view {
		display: flex;
		flex-direction: column;
	}

	.page-wallet {
		padding: 15px;


		.phrase-box {
			border-radius: 6px;
			flex-direction: row;
			justify-content: space-between;
			flex-wrap: wrap;
			margin: 15px 0;

			.phrase-item {
				width: 33.33%;
				padding: 10px 5px;
				text-align: center;

				.word {
					font-weight: bold;
				}
			}
		}

		.button-box-padding {
			position: fixed;
			bottom: 0;
			width: 100%;
			left: 0;
			box-sizing: border-box;
		}
	}

	.remark {
		margin-bottom: 60px !important;

		.title {
			margin: 15px 0;
		}

		.text {
			font-size: 14px;
		}
	}
</style>
